<template>
    <QueryBase @onSearch="doQuery" @onAdd="handleAdd">
        <template #search>
            <el-form :inline="true" :model="queryForm">
                <el-form-item :label="t('课程分类')">
                    <el-select v-model="queryForm.type" :placeholder="t('请选择')" style="width: 200px;" clearable
                        @change="doQuery()">
                        <el-option v-for="item in typeOptions" :key="item.code" :label="item.label"
                            :value="item.code" />
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
        <el-table :data="tableData" default-expand-all :border="true" row-key="objectId"
            header-row-class-name="table-header" height="60vh">
            <!-- <el-table-column prop="objectId" :label="t('系统编号')"></el-table-column> -->
            <el-table-column prop="name" :label="t('名称')" width="260" />
            <el-table-column prop="type_label" :label="t('分类')" width="180" />
            <el-table-column prop="parent_name" :label="t('父类')"></el-table-column>
            <el-table-column :label="t('操作')">
                <template #default="scope">
                    <div style="display: flex;" v-if="action('edit')">
                        <el-button type="text" @click="handleModify(scope.row)">修改</el-button>
                        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </QueryBase>
    <CourseEditor @onSubmited="(data) => { doQuery() }" v-model:show="showEditor" :mode="mode" :data="editModel">
    </CourseEditor>
</template>
<script setup lang="ts">
import { Ref, onMounted, reactive, ref, watch } from 'vue';
import { Plus } from '@element-plus/icons-vue'
import { t } from '@/common/locale'
import { CategoryTypeOptions, deleteCategory, getTypeLabel, queryList } from '@/api/category';
import elHelper from '@/common/elHelper';
import CourseEditor from '@/components/category/CategoryEditor.vue'
import comFunc from '@/common/comFunc';
import QueryBase from '@/components/layout/QueryBase.vue';
import { action } from '@/common/actionHelper';


const queryForm: CategoryQueryForm = reactive({
    type: '',
    parentId: '',
    name: ''
})
const tableData: Ref<CategoryModel[]> = ref([])
const mode = ref('add')
const editModel: CategoryModel = reactive({})
const showEditor = ref(false)
const typeOptions: Ref<{ code: string, label: string }[]> = ref(CategoryTypeOptions)
queryForm.type = 'TOPIC'


const doQuery = async () => {
    if (!action('view')) {
        elHelper.showErrorMsg('权限不足')
        return
    }
    const loading = elHelper.showLoading()
    const re = await queryList(queryForm.type)
    if (re.isSuccess) {
        let list = re.data || []
        list.forEach((item) => {
            item.type_label = getTypeLabel(item.type)
            item.parent_name = ''
            if (comFunc.nvl(item.parentId) !== '') {
                let parentItem = list.find((w) => w.objectId === item.parentId)
                if (parentItem) item.parent_name = parentItem!.name
            }
        })
        const t = toTree(list)
        tableData.value = t
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}
const handleAdd = () => {
    editModel.type = ''
    editModel.objectId = ''
    editModel.name = ''
    editModel.parentId = ''
    mode.value = 'add'
    showEditor.value = true
}
const handleModify = (data: CategoryModel) => {
    Object.assign(editModel, data)
    mode.value = 'modify'
    showEditor.value = true
}
const handleDelete = async (data: CategoryModel) => {
    if (!await elHelper.showConfirmMsg('确定要删除吗?')) return
    let loading = elHelper.showLoading()
    const re = await deleteCategory(data.objectId!)
    if (re.isSuccess) {
        elHelper.showSuccessMsg('操作成功')
        await doQuery()
    } else {
        elHelper.showErrorMsg(re.msg)
    }
    elHelper.closeLoading(loading)
}
const toTree = (data: any[], parentNode: any = null): any[] => {
    let parentId = parentNode ? parentNode.objectId : null
    let l = data.filter(w => parentId !== null ? w.parentId === parentId : w.parentId === null || w.parentId === '')
    l.forEach((item) => {
        toTree(data, item)
    })
    if (parentNode) {
        parentNode['children'] = l
    }
    return l
}
onMounted(() => {
    doQuery()
})

</script>
<style scoped lang="scss"></style>